<template>
  <teleport to="body">
    <transition name="fade">
      <div
        class="contact-searRes"
        ref="resultRef"
        v-if="modelValue && friendsData?.length"
        v-draggable="{ draggable: true }"
      >
        <div id="header" class="contact-searRes__header">
          <span>搜索结果</span>
          <SvgIcon
            icon-class="close"
            popper-class="title-close"
            @click="emits('update:modelValue', false)"
          />
        </div>
        <el-scrollbar :max-height="330">
          <ul>
            <li
              v-for="{ userId, avatar, remark, initials } in friendsData"
              :key="userId"
              class="searRes-list__item"
              @click="turnToPage(userId, initials)"
            >
              <img :src="avatar" alt="" @click.stop="openModal(avatar)" />
              <span :title="remark">{{ remark }}</span>
            </li>
          </ul></el-scrollbar
        >
        <Modal v-model="showModal">
          <img class="img-browser" :src="imgSrc" alt="" />
        </Modal></div></transition
  ></teleport>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import Modal from "@/components/ui-components/modal.vue";
import vDraggable from "@/directives/draggable";
import { useRouter } from "vue-router";

const router = useRouter();

const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    friendsData?: Array<
      Pick<OtherIdInfo, "userId" | "avatar" | "remark"> & { initials: string }
    >;
    positionEle: HTMLDivElement;
  }>(),
  {
    friendsData: [] as any,
  }
);

const emits = defineEmits<{
  (e: "update:modelValue", show: boolean): void;
}>();

/**
 * 当前用户查看的图片的url
 */
const imgSrc = ref<string>("");
/**
 * 是否显示模态框
 */
const showModal = ref<boolean>(false);
// 浏览图片时打开模态框
const openModal: (url: string) => void = (url: string): void => {
  imgSrc.value = url;
  showModal.value = true;
};

/**
 * 给该组件一个ref属性
 */
const resultRef = ref<HTMLDivElement>(document.createElement("div"));
/**
 * 设置该组件距离视图的上边界距离
 */
const setPosition = () => {
  setTimeout(() => {
    if (resultRef.value) {
      const rect = props.positionEle.getBoundingClientRect();
      const fatherTop: number = rect.y;
      const fatherLeft: number = rect.left;
      const fatherHei: number = rect.height;
      const fatherWid: number = rect.width;
      resultRef.value.style.cssText += `display: block;left: ${
        fatherLeft + 0.5 * fatherWid
      }px;top: ${fatherTop + fatherHei}px`;
    }
  }, 100);
};

watch(
  () => props.modelValue,
  (show: boolean) => {
    if (show) {
      setPosition();
      globalThis.addEventListener("resize", setPosition);
    } else globalThis.removeEventListener("resize", setPosition);
  }
);

// 跳转至好友信息详情页
const turnToPage = (userId: string, initials: string) => {
  emits("update:modelValue", false);
  router.push({
    name: "friendInfo",
    query: { userId },
    params: { initials },
  });
};
</script>

<style lang="scss" scoped>
.fade {
  @include fade(0.15s, ease);
}

.contact {
  &-searRes {
    background-color: #fff;
    width: 250px;
    display: none;
    border-radius: 6px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
    position: absolute;
    z-index: 998;
    padding-bottom: 6px;
    transform: translateX(-50%);

    &__header {
      position: relative;
      padding: 12px;
      text-align: left;
      cursor: move;

      span {
        font-size: 12px;
        color: $dimFontCor;
      }

      .title-close {
        position: absolute;
        right: 3%;
        top: 10px;
        color: #909399;
        cursor: pointer;
        transition: color 0.15s;

        &:hover {
          color: #79bbff;
        }
      }
    }

    .searRes-list__item {
      display: flex;
      align-items: center;
      padding: 10px 15px;
      transition: background-color 0.75s;
      font-size: 14px;
      cursor: pointer;
      color: #333;

      span {
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &:hover {
        background-color: rgba(154, 152, 152, 0.114);
      }

      img {
        @include setWidHei(38px, 38px);
        border-radius: 50%;
        margin-right: 20px;
        object-fit: cover;
      }
    }
  }
}
</style>
